<template>
    <!-- 首页 -->
    <el-container class="layout-container-demo" style="height: 100%;">
        <!-- 页面的左侧菜单区域 -->
        <el-aside width="200px" style="background-color: #0F2634;">
            <el-scrollbar>

                <div style="width: 100%;height: 200px;display: flex;align-items: center;justify-content: center;">
                    <div>
                        <div class="avatar">
                            <el-avatar :size="90" :src="peopleStore.userInfo.avatar"/>
                        </div>
                        <div style="color: aqua;margin-top: 10px;">{{ peopleStore.userInfo.uname }}的种植基地</div>
                    </div>
                </div>
                <!-- 菜单项整体 -->
                <el-menu style="border-right: none;" :default-active="routeStore.activeIndex.toString()"
                    @select="selectHandler" :default-openeds="['2', '6']" class="elMenu">
                    <!-- 菜单项单个 外层父级菜单 -->
                    <component v-for="(item) in routeStore.menu" :key="item.name" :index="item.index"
                        :is="item.menu === 1 ? 'el-sub-menu' : 'el-menu-item'">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            {{ item.name }}
                        </template>
                        <!-- 内层子级菜单 -->
                        <el-menu-item v-for="(child) in item.children" :key="child.id" :index="child.index">
                            <template #title>
                                <el-icon>
                                    <component :is="child.icon" />
                                </el-icon>
                                {{ child.name }}
                            </template>
                        </el-menu-item>
                    </component>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <!-- 页面的头部区域 -->
        <el-container class="routerview">
            <el-header style="text-align: right; font-size: 12px;background-color: #123E4B;">
                <div class="toolbar">
                    <span>农场主:{{ peopleStore.userInfo.uname }}</span>
                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px">
                            <setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="logoutHandler">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 剩下的部分就是页面剩余的主体,也就是组员开发的页面放置的位置,routerView -->
            <RouterView />
        </el-container>
    </el-container>
</template>

<script lang='ts' setup>
import { getMenu } from '@/api/MenuApi';
import router from '@/router';
import { onBeforeMount } from 'vue';
import { useRouteStore } from '@/stores/RouteStore';
import { usePeopleStore } from '@/stores/PeopleStore';

// 变量
const routeStore = useRouteStore()
const peopleStore = usePeopleStore()
console.log(peopleStore.userInfo.avatar)
// 函数
// 挂载前的生命周期
onBeforeMount(async () => {
    routeStore.menu = (await getMenu()).data

    // 页面之前现根据留存的acIndex去跳转一下页面先
    routeStore.getRouteByAcIndex(routeStore.activeIndex)
})


// 这里先做一个简单的退出登录功能,后期完善
const logoutHandler = () => {
    peopleStore.clearUserInfo()
    router.push({ name: "login" })
}
// 让选中的菜单项持久化
const selectHandler = (index: string) => {
    // 持久化
    routeStore.activeIndex = Number(index)
    // 根据index去找对应的路由的route属性(从menu当中找)并且传递给pinia中的targetPage
}

</script>

<style lang='scss' scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: white;
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);

    // background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}

.routerview {
    background: -webkit-linear-gradient(left, #1D90B0, #26AFA5);
}

.avatar {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: #173D47;
    display: flex;
    justify-content: center;
    align-items: center;
}
.elMenu{
    --el-menu-bg-color:#0F2634;
    --el-menu-text-color:gray;
    --el-menu-active-color:#52E1DC;
}
</style>